<template>
	<view class="content">
		<view class="topSearch">
			<input class="input" type="text" placeholder="请输入关键字" v-model="searchId" @confirm="search"
				@focus="historyShow=true" @blur="closeHistory">
			<view class="submit" @click="search">
				<image src="/static/img/homePagePic_slices/search@2x.png" mode="scaleToFill"></image>
				<span>搜索</span>
			</view>
		</view>
		<view class="history" v-if="historyShow">
			<span>历史记录</span>
			<view class="historyCard">
				<view class="tag" v-for="(item ,index) in historyList" :key="index" @click="historySearch(item)">
					<span>{{item}}</span>
				</view>
			</view>
		</view>

		<view :class="{searchlist:jobList.length}">
			<!-- 职位卡片 -->
			<Jobcard v-for="item,index in jobList" :key="index" :jobInfo="item"></Jobcard>
		</view>
	</view>
</template>

<script>
	import Jobcard from '@/components/jobCard.vue'
	export default {
		components: {
			Jobcard
		},
		data() {
			return {
				historyList: [],
				searchId: '',
				jobList: [],
				historyShow: false,
			}
		},
		onShow() { //这里一进来就查询之前留下的搜索内容  别忘了退出登录的时候删掉
			// console.log(uni.getStorageSync('history'))
			if (uni.getStorageSync('history')) {
				this.haveHistory = true
				this.historyList = uni.getStorageSync('history') //存放历史记录的数组
			}
		},
		methods: {
			historySearch(item) {
				this.searchId = item
				this.search()
			},
			closeHistory() {
				setTimeout(()=>{
					this.historyShow=false
				},100)
			},
			addHistory(e) {
				//存在，flag1==0
				if (e) {
					try {
						let flag1 = this.historyList.findIndex(item => item === e) //判断数组里面有没有重复查询过的内容
						if (flag1 != -1) { //有重复内容
							if (flag1 != 0) { //如果删除0会出错
								this.historyList.splice(flag1, 1) //删除重复重新添加一个
								this.historyList.unshift(e) //添加一个内容
							}
						} else {
							if (this.historyList.length >= 16) {
								this.historyList.splice(15, 1) //删除最后一个新添加一个
								this.historyList.unshift(e) //添加一个内容
							} else {
								this.historyList.unshift(e) //添加一个内容
							}
						}
						uni.setStorageSync('history', this.historyList); //保存用户搜索历史
						this.historyList = uni.getStorageSync('history') //存放历史记录的数组
					} catch (e) {
						this.historyList.push(e) //添加一个内容
						//TODO handle the exception
					}
				}
			},
			search() {
				this.addHistory(this.searchId)
				this.$store.dispatch('initDic').then(() => {
					this.$http.request({
						url: '/post/search',
						data: {
							"searchId": this.searchId,
							"startPage": 0
						}
					}).then((result) => {
						let res = result.data
						console.log('搜索结果', res);
						if (res.code == 200) {
							this.jobList = res.data.posts
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				})
			},
		}
	}
</script>

<style scoped>
	.content {
		background-color: #fff;
		position: relative;
		top: 140rpx;
	}

	.searchlist {
		padding: 12rpx 0;
		box-sizing: border-box;
	}

	.topSearch {
		display: flex;
		width: 100%;
		height: 140rpx;
		position: fixed;
		/* #ifdef H5 */
		top: 80rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN || MP-ALIPAY */
		top: 0;
		/* #endif */
		z-index: 999;
		background: #fff;
	}

	.topSearch input {
		margin: 40rpx;
		width: 65%;
		height: 64rpx;
		background-color: #F6F6F6;
		border-left: 20rpx solid #F6F6F6;
	}

	.topSearch .submit {
		margin-top: 40rpx;
	}

	.topSearch .submit image {
		width: 120rpx;
		height: 64rpx;
	}

	.topSearch .submit span {
		display: block;
		position: relative;
		left: 50rpx;
		bottom: 65rpx;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.history {
		background: #fff;
		padding-bottom: 24rpx;
	}

	.history>span {
		margin-left: 40rpx;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #001A18;
	}

	.history .historyCard {
		margin-left: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.history .historyCard .tag {
		margin: 20rpx 0 0 20rpx;
		background: #F3F7F8;
		border-radius: 4px 4px 4px 4px;
		font-size: 12px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #001A18;
		/* vertical-align: middle; */
	}

	.history .historyCard .tag span {
		display: inline-block;
		margin: 16rpx;
	}
</style>
